<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../static/lib/jquery/jquery-3.2.0.js" th:src="@{/static/lib/jquery/jquery-3.2.0.js}"></script>
    <title>welcome</title>
    <style>
        *{
            margin:0px;
            padding:0px;
            cursor:pointer;
        }
        .tableBg{
            width:100%;
            text-align: left;
        }
        .divBg{
            text-align: left;
            width: 94%;
            padding-left: 20px;
        }
        table tr td{
            padding:5px 0px;
        }
        .picSize{
            width: 16px;
            height:16px;
        }
        .fontSize{
            font-size:16px;
        }
        .fontBigSize{
            font-size:18px;
        }
        .tdClass{
            color: #0CB89F;
        }
        .spanClass{
            border-bottom: 3px #0CB89F solid;
        }
    </style>
</head>
<body style="background-color: #EDF1F2;">
    <img style="background-image:url(static/RT/img/qlm.jpg);height: 300px;background-size:100% 300px;width: 100%;"/>
    <div style="width: 94%;padding-left: 20px;">
    <table class="tableBg" cellspacing="0" cellpadding="0" border="0">
        <tr><td style="font-size:22px;" colspan="3">光速擦车店(清凉门店)</td></tr>
        <tr><td class="fontSize" colspan="3"><img src="static/RT/img/moon.png" class="picSize" style="vertical-align: middle;">
            09:00-18:00营业
            </td></tr>
        <tr><td class="fontSize" colspan="3"><img src="static/RT/img/position.png" class="picSize" style="vertical-align: middle;">
            中石化清凉门加油站内
            </td></tr>
        <tr class="fontBigSize" style="font-weight: 700;" id="trs">
            <td style="width:33%;" class="tdClass"><span style="cursor:pointer;" class="spanClass">服务信息</span></td>
            <td style="width:33%;"><span id="ttt" style="cursor:pointer;">用户评论</span></td>
            <td><span style="cursor:pointer;">商家信息</span></td>
        </tr>
    </table>
    </div>
    <div id="divs">
        <div class="divBg">
            服务信息000
        </div>
        <div class="divBg" style="display: none;">
            用户评论
        </div>
        <div class="divBg" style="display: none;">
            商家信息
        </div>
    </div>
<script type="text/javascript">
    //扫码支付
    var scanPayFun;

    scanPayFun = {
        init: function () {
            let _this = this;

            $("#trs td").on('click',function () {
                $("#trs td").removeClass("tdClass");
                $("#trs div").removeClass("spanClass");
                $("#divs div").hide();

                $(this).addClass("tdClass");
                $("#trs div").eq(id).addClass("spanClass");
                $("#divs div").eq(id).show();
            })
        }
    };

    scanPayFun.init();
</script>
</body>
</html>